<template>
    <div class="pettycash">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Petty Cash
            </div>
        </div>
        <!-- 提示 -->
        <div class="pettycash-tip"><span>Get more amount after instant payment</span></div>
        <!-- logo -->
        <div class="pettycash-logo">
            <div class="pc-loso-box">
                <img src="../assets/logo.png" alt="">
            </div>
            <div class="pc-desc">BuddyParty</div>
        </div>
        <!-- 商品 -->
        <div class="pettycash-goods">
            <div class="pettycash-goods-top">
                <div class="pettycash-goods-top-desc">
                    <div class="pettycash-goods-top-desc-top">Repayment amount</div>
                    <div class="pettycash-goods-top-desc-bottom">₹{{ pettycashData.loanAmount }}</div>
                </div>
                <!-- 客服 -->
                <div class="pettycash-goods-top-kf" @click="$router.push('/kefu')">
                    <img src="../assets/kefu.png" alt="">
                </div>
            </div>
            <div class="pettycash-goods-center">
                <ul class="pettycash-goods-center-left">
                    <li>Loan note number</li>
                    <li>Phone number</li>
                    <li v-if="pettycashData.bankCard">Bank card number</li>
                    <li>Term(Days)</li>
                    <li>End date</li>
                    <li>Insterest</li>
                    <li>Total service charge</li>
                    <li>Overdue interest</li>
                </ul>
                <div class="pettycash-goods-center-right">
                    <li>{{ pettycashData.orderId }}</li>
                    <li>{{ pettycashData.phone }}</li>
                    <li v-if="pettycashData.bankCard">{{ pettycashData.bankCard }}</li>
                    <li>{{ pettycashData.loanTerm }} {{ pettycashData.termUnit }}</li>
                    <li>{{ new Date(pettycashData.expiryTime).toLocaleString() }}</li>
                    <li>{{ pettycashData.interestAmount }}</li>
                    <li>{{ pettycashData.adminAmount }}</li>
                    <li>{{ pettycashData.expiryAmount }}</li>
                </div>
            </div>
            <div class="pettycash-goods-bottom">
                <div class="pettycash-goods-bottom-left" @click="toPay">
                    Full Repayment
                </div>
                <div class="pettycash-goods-bottom-right" @click="$router.push('/yanqi')">
                    Rollover
                </div>
            </div>
        </div>
        <!-- 描述 -->
        <copycode></copycode>
    </div>
</template>
<script>
import copycode from "../components/copycode";
import { huankuan } from "../api";
import { jiami, jiemi } from '../utils/aeskey.js'
export default {
    components: { 'copycode': copycode },
    data() {
        return {
            pettycashData: {}
        }
    },
    methods: {
        //获取还款计划
        async gethuankuan() {
            const f = {
                model: {
                    orderId: ''
                }
            }
            f.model.orderId = this.$store.state.orderId
            const res = await huankuan(jiami(f))
            this.pettycashData = jiemi(res.data).model
            console.log(this.pettycashData, '还款数据')
        },
        //去还款
        toPay() {
            this.$router.push('/repayment')
        },
    },
    created() {
        this.gethuankuan()
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
</script>

<style lang="less" scoped>
@a: 3.75vw;

.pettycash {
    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (135/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }

    //logo
    .pettycash-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: (16/@a);
        margin-bottom: (5/@a);

        .pc-loso-box {
            width: (34/@a);
            height: (34/@a);
            margin-right: (10/@a);

            img {
                width: 100%;
            }
        }

        .pc-desc {
            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (17/@a);
            color: #000000;
        }
    }

    // 提示
    .pettycash-tip {
        height: (35/@a);
        background: #ede3f6;
        width: 100vw;
        margin-top: (56/@a);
        position: relative;

        span {
            position: absolute;
            top: (10/@a);
            left: (10/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (14/@a);
            color: #9F3DFF;
            opacity: 1 !important;
        }

    }

    // 商品
    .pettycash-goods {
        width: (330/@a);
        height: (350/@a);
        margin-left: (23/@a);
        margin-top: (10/@a);
        border-radius: (15/@a);

        .pettycash-goods-top {
            position: relative;
            height: (75/@a);
            background-color: #9f3dff;
            padding-top: (7/@a);
            box-sizing: border-box;
            border-radius: (15/@a) (15/@a) 0px 0px;

            .pettycash-goods-top-desc-top {
                margin-left: (110/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                color: #FFFFFF;
            }

            .pettycash-goods-top-desc-bottom {
                margin-left: (118/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (24/@a);
                line-height: 200%;
                color: #FFFFFF;
            }

            .pettycash-goods-top-kf {
                position: absolute;
                top: (10/@a);
                right: (10/@a);
                width: (25/@a);
                height: (25/@a);

                img {
                    width: 100%;
                }
            }
        }


        .pettycash-goods-center {
            display: flex;
            height: (231/@a);
            justify-content: space-around;

            li {
                list-style: none;
                margin-top: (12/@a);
            }

            .pettycash-goods-center-left {
                width: 50%;
                height: 30px;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                text-align: left;
                color: #808080;
                margin-left: (20/@a);

            }

            .pettycash-goods-center-right {
                width: 50%;
                height: 30px;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                text-align: right;
                color: #202020;
                margin-right: (30/@a);
            }
        }


        .pettycash-goods-bottom {
            height: (44/@a);
            display: flex;

            .pettycash-goods-bottom-left {
                width: (165/@a);
                border-radius: 0px 0px 0px (15/@a);
                text-align: center;
                background: #9F3DFF;
                line-height: (44/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 500;
                font-size: (18/@a);
                color: #FFFFFF;
            }

            .pettycash-goods-bottom-right {
                width: (165/@a);
                background-color: #ca5aff;
                border-radius: 0px 0px (15/@a) 0px;
                text-align: center;
                line-height: (44/@a);
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (18/@a);
                color: #fff;
            }
        }
    }

    // 描述

}
</style>